<template>
  <div
    class="tac"
    style="margin-top:-10px; background-color:#fff; padding:0 20px;"
    v-loading="loading1"
  >
    <div
      style="height:40px;line-height:40px;margin-top:-10px;font-size:18px;
    color: #909399;font-weight: 700;"
    >影院列表</div>
    <el-table :data="list" border style="width: 100%; ">
      <el-table-column align="center" prop="name" label="影院名称"></el-table-column>
      <el-table-column align="center" prop="address" label="地址"></el-table-column>
      <el-table-column align="center" prop="cinemaId" label="影院ID"></el-table-column>
      <el-table-column align="center" prop="cityId" label="城市Id"></el-table-column>
      <el-table-column align="center" prop="cityName" label="城市名称"></el-table-column>
      <el-table-column align="center" prop="areaId" label="区域id"></el-table-column>
      <el-table-column align="center" prop="areaName" label="区域名称"></el-table-column>
      <el-table-column align="center" prop="lowPrice" label="最低价格"></el-table-column>

      <el-table-column width="200px" align="center" label="操作" v-loading="loading">
        <template slot-scope="scope">
          <el-button @click="removcity(scope)" type="danger" icon="el-icon-delete" circle></el-button>
          <el-button
            @click="changedata(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            style=" margin-left:30px;;"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="tac" style="padding:15px 0 15px; ">
      <el-pagination
        :hide-on-single-page="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      loading1: true
    };
  },
  methods: {
    changedata(data) {
      this.$router.push({ path: "/cinema/add", query: { data: data } });
      // this.$router.push({ name: "影院编辑", params: data });
    },
    removcity(scope) {
      this.loading = true;
      let index = scope.$index;

      this.$confirm("您确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            cinemaId: scope.row.cinemaId
          };
          let url = "/cinema/delById";
          this.$axios
            .post(url, data)
            .then(res => {
              this.$message.success("删除影院信息成功");
              this.list.splice(index, 1);
            })
            .catch(err => {
              this.$message.error("删除错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // formatters(row, column, cellValue, index) {
    //   return cellValue ? "是" : "否";
    // },
    handleSizeChange(num) {
      this.getList(num);
    },

    handleCurrentChange(num) {
      this.getList(num);
    },
    getList(pageNum) {
      this.loading = true;
      let url = "/cinema/getList?pageNum=" + pageNum;
      this.$axios
        .get(url)
        .then(res => {
          this.list = res.cinemas;
          this.total = res.total;
          this.loading1 = false;
        })
        .catch(error => {
          this.$message.error("删除错误");
          this.loading1 = false;
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>
